<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
    <style>
        #areaDiv{
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
        #showMsg{
            width: 200px;
            height: 40px;
            border: 1px solid black;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>
</html>
<script>
    /*
        当鼠标在 areaDiv 中移动时，在showMsg 中显示鼠标的坐标

    */
    
    // 获取两个 div
    var areaDiv = document.getElementById("areaDiv");
    var showMsg = document.getElementById("showMsg");

    /*
        onmousemove
            - 该事件将会在鼠标在元素中移动时被触发 ⭐⭐

        事件对象
            - 当事件的响应函数被触发时， 浏览器每次都会将一个事件对象作为实参传递进响应函数
                在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘的哪个键被按下 鼠标滚轮滚动方向...

    */
    areaDiv.onmousemove = function(event){
        
        /*
            在IE8中，响应函数被触发时，浏览器不会传递事件对象
                在IE8及以下的浏览器中，是将事件对象作为window对象的属性存储的
        */
        // 解决兼容经方法 一 ⭐
        if(!event){
           event = window.event; 
        }
        // 解决兼容经方法 二 ⭐
        event = event || window.event;
        /*
            clientX 可以获取鼠标指针的水平坐标  ⭐⭐📌
            clientY 可以获取鼠标指针的垂直坐标  ⭐⭐📌
        */


        var x = event.clientX;
        var y = event.clientY;

        // 在 showMsg 中显示鼠标的坐标
        showMsg.innerHTML = "x = "+x+" y = "+y;
        // alert(event);
    };
</script>